<template>
    <div class="login">
        <el-row>
            <el-col :span="10" :offset="7">
                <el-tabs type="border-card" class="tabs" >
                    <el-tab-pane label="用户名密码登录">
                        <el-form ref="loginForm" :rules="rules" :model="form" label-width="80px" class="demo-ruleForm">
                            <el-form-item label="用户名" prop="username">
                                <el-input v-model="form.username"></el-input>
                            </el-form-item>
                            <el-form-item label="密码" prop="password">
                                <el-input placeholder="请输入密码" v-model="form.password" show-password></el-input>
                            </el-form-item>
                            <el-form-item label="验证码" prop="code">
                                <el-input type="text" v-model="code" style="width: 70%"></el-input>
                                <img :src="codeImg" @click="getCode" style="margin-top: 10px"/>
                            </el-form-item>
                            <template>
                                <el-radio v-model="radio" label="1">学生</el-radio>
                                <el-radio v-model="radio" label="2">教师</el-radio>
                            </template>
                            <el-form-item>
                                <el-button type="primary" @click="submitForm">登录</el-button>
                                <el-button @click="resetForm('loginForm')">重置</el-button>
                            </el-form-item>
                        </el-form>
                    </el-tab-pane>
                  <!--  <el-tab-pane label="手机验证码登录">
                        手机验证码登录
                    </el-tab-pane>-->
                </el-tabs>
            </el-col>
        </el-row>
    </div>
</template>

<script>
    export default {
        name: "WebLoginView",
        data() {
            return {
                radio: '1',
                form: {
                    username: '',
                    password: '',
                },
                rules: {
                    username: [
                        {required: true, message: '请输入用户名', trigger: 'blur'}
                    ],
                    password: [
                        {required: true, message: '请输入密码', trigger: 'blur'}
                    ]
                },
                code: '',
                codeImg: '',
                codeKey: ''

            }
        },
        created() {
            this.getCode();
        },
        methods: {
            getCode(){
                this.$axios.get("http://localhost:8080/code").then(response => {
                    this.codeKey = response.data.codeKey;
                    this.codeImg = response.data.codeImg;
                });
            },
            submitForm() {
                this.$refs["loginForm"].validate((valid) => {
                    if (valid) {
                        this.$axios.post("http://localhost:8080/web/login",this.form,{params:{radio:this.radio,code:this.code,codeKey:this.codeKey}} ).then(response => {
                            if (response.data.code == 10000) {
                                this.$message.error('验证码错误');
                            }
                            else if (response.data.code == 10001) {
                                this.$message.error('账号或密码错误，请重新登录');
                            } else {
                                let token = response.data.token;
                                window.localStorage.setItem("token", token);
                                if(this.radio == 1){
                                    window.localStorage.setItem("student", JSON.stringify(response.data.student));
                                }
                                else {
                                    window.localStorage.setItem("teacher", JSON.stringify(response.data.teacher));
                                }
                                this.$router.push("/");
                            }
                        });
                    } else {
                        console.log('error submit!!');
                        return false;
                    }
                });
            },
            resetForm(formName) {
                this.$refs[formName].resetFields();
            }
        }
    }
</script>

<style scoped>
    .login {
        position: relative;
        width: 100%;
        height: 100%;
        background-image: url("https://xu1655.top/%E8%83%8C%E6%99%AF.jpg");
        background-size: 100%;
    }
    .tabs{
        margin-top: 120px;
        /*background-color: rgba(0, 0, 0, 0.2);*/
    }
    /* .el-tabs--border-card>.el-tabs__header{
         background-color: rgba(0, 0, 0, 0.2) !important;
         width: 200px;
     }
     .el-input__inner {
         height: 47px;
         background-color: rgba(255, 255, 255, 0.247);
     }*/
</style>